<template>
    <l-layout class="l-tab-page" v-show="!lr_loadPage" >
        <l-panel >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入要查询关键字')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                :columns="lr_getPageColumns(columns)"
                :dataSource="searchTableData || lr_dataSource" 
                :loading="loading" >
                <template v-slot:f_CreateDate="scope" >
                    {{lr_dateFormat(scope.row.f_CreateDate)}}
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>
        <l-dialog 
            :title="formTitle"
            :visible.sync="formVisible"
            :height="464"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" ></my-form>       
        </l-dialog>


        <l-drawer 
            :title="`${$t('查看数据源数据')}-${name}`"
            :visible.sync="lookVisible"
            :showOk="false"
            :showClose="false"
            :width="800"

            @close="handleCloseLookForm"
            @opened="handleOpenedLookForm"
            >
            <look-form ref="lookForm" :code="code" ></look-form>
        </l-drawer>
    </l-layout>
</template>

<script>
const api = window.$api.data.dbsource
import MyForm from './form'
import LookForm from './lookForm.vue'
export default {
    components: {
        MyForm,
        LookForm
    },
    data () {
        return {
            lr_isPage:true,
            //查询
            searchWord:'',
            searchTableData:null,

            loading:false,
            columns: [
                {label:'编码',prop:'f_Code',minWidth:'150'},
                {label:'名称',prop:'f_Name',minWidth:'150'},
                {label:'数据库',prop:'f_DbId',width:'200'},
                {label:'创建用户',prop:'f_CreateUserName',width:'100'},
                {label:'创建时间',prop:'f_CreateDate',width:'160'}
            ],
            tableBtns:[
                {prop:'LookData',label:'查看'},
                {prop:'Edit',label:'编辑'},
                {prop:'Delete',label:'删除'}
            ],

            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false,

            lookVisible:false,
            code:'',
            name:''
        };
    },

    computed:{
    },
    mounted () {
        this.init()
    },
    methods:{
        async init(){
            this.loading = true
            await this.lr_loadDataSourceList(false)
            this.loading = false
        },

        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.lr_dataSource.filter(item => item.f_Code.indexOf(this.searchWord) >-1 || item.f_Name.indexOf(this.searchWord)>-1)
            }
            else{
                this.searchTableData = null
            }
        },
        handleAdd(){
            this.formEdit = false
            this.showForm('新增数据源')
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.showForm('编辑数据源')
            
        },
        handleDelete($index,row){
            this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(() => {
                api.remove(row.f_Id).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.init()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })          
            })
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validateForm(()=>{
                showLoading();
                const formData = this.$refs.form.getForm();
                if(this.formEdit){// 修改数据
                    api.update(formData.f_Id,this.$deepClone(formData)).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '更新成功!'
                        })
                        this.init()
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.add(this.$deepClone(formData)).then(()=> {
                        hideLoading();
                        this.formVisible = false;
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.init()
                    }).catch(() => {
                        hideLoading()
                    })
                }
            });
        
        },
        handleOpenedForm(showLoading,hideLoading){
            if(this.formEdit){
                showLoading('加载数据中...');
                api.get(this.formEditRow.f_Code).then((res)=> {
                    this.$refs.form.setForm(res.data.data)
                    hideLoading()
                }).catch(()=>{
                    this.$message({
                        type: 'warning',
                        message: '获取编辑数据失败!'
                    });
                    hideLoading()
                    this.formVisible = false
                })    
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        },

        handleLookData($index,row){
            this.lookVisible = true
            this.code = row.f_Code
            this.name =  row.f_Name
        },
        handleCloseLookForm(){
            this.$refs.lookForm.resetForm()
        },
        async handleOpenedLookForm(showLoading,hideLoading){
            showLoading('加载数据中...')
            await this.$refs.lookForm.init()
            hideLoading()
        }
    }

}
</script>
